<template>
  <scroll-view scroll-y @scrolltolower="handleTolow" class="cate_wrap">
    <swiper
      class="card-swiper square-dot"
      :indicator-dots="true"
      :circular="true"
      :autoplay="true"
      interval="5000"
      duration="500"
      @change="cardSwiper"
      indicator-color="#8799a3"
      indicator-active-color="#feb2b2"
    >
      <swiper-item
        @click="goDetailPage(item)"
        v-for="(item,index) in adList"
        :key="index"
        :class="cardCur==index?'cur':''"
      >
        <view class="swiper-item swiper_item">
          <image :src="item.imgUrl" mode="aspectFill" />
          <view class="swiper_name">{{item.title}}</view>
        </view>
      </swiper-item>
    </swiper>
    <!--轮播-->
    <!-- 轮播图结束 -->

    <!-- 最热列表开始 -->
    <view class="hot_wrap">
      <view class="cu-bar search bg-white shadow">
        <view class="hots_title">
          <view>
            热门课程
            <text class="iconfont iconhot1"></text>
          </view>
        </view>
      </view>
      <block v-for="(item,index) in coursesList" :key="index">
        <courseList :item="item" :index="index"></courseList>
      </block>
    </view>
    <!-- 最热列表结束 -->
  </scroll-view>
</template>

<script>
import { uniSwiperDot } from "@dcloudio/uni-ui";
import courseList from "../../component/courseList.vue";
export default {
  components: { uniSwiperDot, courseList },
  data() {
    return {
      cardCur: 0,
      current: 0,
      mode: "nav",
      coursesList: [],
      hasMore: true, //是否还有更多数据
      params: {
        //获取更多的参数
        limit: 10,
        skip: 0
      },
      adList: []
    };
  },
  methods: {
    change(e) {
      this.current = e.detail.current;
    },
    handleTolow() {
      console.log("到底啦");
      if (this.hasMore) {
        //还有更多的话修改参数
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "已经没有数据了啦!",
          icon: "none"
        });
      }
    },
    getList() {
      this.request({
        url:
          this.apiServer +
          "/courses/findHotCourses?skip=" +
          this.params.skip +
          "&limit=" +
          this.params.limit +
          "&uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log(res);
        if (res.data.length === 0) {
          this.hasMore = false;
          return;
        }
        //this.list = res.data;
        this.coursesList = [...this.coursesList, ...res.data]; //拼接list
      });
    },
    goDetailPage(e) {
      console.log(e);

      if (e.type == "课程") {
        uni.navigateTo({
          url: `/pagesB/courseDetail/index?id=${e.pid}`
        });
      } else if (e.type == "活动") {
        uni.navigateTo({
          url: `/pagesB/activitiesDetail/index?id=${e.pid}`
        });
      }
    },
    getAd() {
      this.request({
        url: this.apiServer + "/advertise/findIndexAd"
      }).then(res => {
        console.log(res);
        this.adList = res.data;
      });
    },
    handClickImg(e) {
      console.log("广告地址:");
      console.log(e);
    },
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    }
  },
  mounted() {
    //this.uId = 6;
    this.getList();
    this.getAd();
  }
};
</script>

<style lang="scss" scoped>
.swiper_item {
  position: relative;
  border: 5rpx #fff solid;
  image {
    //height: 240rpx;
  }
  .swiper_name {
    padding-left: 20rpx;
    color: #fff;
    font-weight: 600;
    display: flex;
    position: absolute;
    left: 0;
    bottom: 8rpx;
    align-self: center;
    font-size: 30rpx;
    height: 40rpx;
    width: 100%;
    //渐变
    background-image: linear-gradient(
      to right top,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0)
    );
  }
}

.swiper_wrap {
}
.cate_wrap {
  background-color: #fff;
  //height: calc(100vh - 35px);
  .swiper_box {
    //padding: 0rpx;
    // border: 5rpx aqua solid;
    border-radius: 10rpx;
    .swiper_item {
      height: 400rpx;
      width: 100%;
      image {
        height: 100%;
        width: 100%;
      }
    }
  }

  // 热门
  .hot_wrap {
    padding: 10rpx 5rpx 0rpx;
    .hots_title {
      padding: 5rpx;
      view {
        border-left: solid $color-theme 10rpx;
        padding-left: 30rpx;
        font-size: 36rpx;
        font-weight: 600;
      }
      .iconhot1 {
        padding-left: 5rpx;
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>